<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>Title</title>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 系统CSS或JS -->
    <link rel="stylesheet" href="/css/system.css">


</head>
<body>
<div id="app">
    <div id="container" style="width:100%;">
        <div class='row'>
            <h2>月结日管理</h2>
        </div>
        <el-divider></el-divider>
        <span class="demonstration">年份范围</span>
        <el-date-picker
                v-model="query.yearMonth"
                type="datetimerange"
                :picker-options="query.pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyyMMdd"
                format="yyyy-MM-dd"

                align="right"
                >
        </el-date-picker>

        <el-button @click="queryByConditions" type="primary">搜索
        </el-button>
        <el-divider></el-divider>

        <div class='row'>
            <h2>结果集</h2>
        </div>
        <el-button @click="downloadFile" size="small" type="primary">结果集导出Excel</el-button>
        <el-upload
                class="upload-demo"
                action="http://localhost:8080/html/sys/settlement/month/import"
                multiple
                :on-success="uploadSuccessAfter"
                :on-error="uploadErrorAfter">
            <el-button size="small" type="warning">Excel新增或编辑</el-button>
        </el-upload>
        <template>
            <el-table
                    :data="settlementList"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="managecom"
                        label="机构编号"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="stattype"
                        label="stattype"
                        width="100">
                    <template scope="scope">
                        <span v-if="scope.row.stattype==1" style="color:green;">自然月</span>
                        <span v-if="scope.row.stattype==6" style="color:red;">月结</span>
                        <span v-if="scope.row.stattype==16" style="color:red;">月结</span>

                    </template>
                </el-table-column>


                <el-table-column
                        prop="yearmonth"
                        label="年份"
                        width="140">
                </el-table-column>
                <el-table-column
                        prop="startdate"
                        label="开始时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="enddate"
                        label="结束时间"
                        width="180">
                </el-table-column>


            </el-table>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page.pageNum"
                        :page-sizes="[2, 4, 6, 10]"
                        :page-size="page.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.total">
                </el-pagination>
            </div>

        </template>

    </div>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            editVisible: false,
            settlementList: [],
            page: {
                pageNum: 0,
                pageSize: 10,
                total: 0,
            },
            query: {
                pickerOptions: {
                    shortcuts: [{
                        text: '本月',
                        onClick(picker) {
                            picker.$emit('pick', [new Date(), new Date()]);
                        }
                    }, {
                        text: '今年至今',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date(new Date().getFullYear(), 0);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近六个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setMonth(start.getMonth() - 6);
                            picker.$emit('pick', [start, end]);
                        }
                    },  {
                        text: '最近一年',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setMonth(start.getMonth() - 12);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                yearMonth: [],
                resultParams: {

                }
            }

        },
        created: function () {
            axios.get("settlement/month/page?pageNum=0&pageSize=10").then(function (res) {
                var data = res.data;
                console.log(res);
                vm.settlementList = data.page.list;
                vm.page.pageNum = data.page.pageNum;
                vm.page.pageSize = data.page.pageSize;
                vm.page.total = data.page.total;

            });
        },
        methods: {
            settlementPage(val, isSize, params) {
                var url = "settlement/month/page";
                if (isSize) {
                    url += "?pageNum=" + vm.page.pageNum + "&pageSize=" + val;
                } else {
                    url += "?pageNum=" + val + "&pageSize=" + vm.page.pageSize;
                }

                if (JSON.stringify(params) != "{}") {
                    var startTime = params.startTime.slice(0,6);
                    var endTime = params.endTime.slice(0,6);



                    url += "&startTime=" + startTime;
                    url += "&endTime=" + endTime;
                }
                console.log(url)

                // url += "&yearMonth"
                axios.get(url).then(function (res) {
                    var data = res.data;
                    console.log(res);
                    vm.settlementList = data.page.list;
                    vm.page.pageNum = data.page.pageNum;
                    vm.page.pageSize = data.page.pageSize;
                    vm.page.total = data.page.total;

                    vm.query.resultParams = params;
                });
            },

            handleSizeChange(val) {
                var params = {
                    startTime: vm.query.yearMonth[0],
                    endTime: vm.query.yearMonth[1]

                }
                vm.settlementPage(val, true, params);
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                var params = {
                    startTime: vm.query.yearMonth[0],
                    endTime: vm.query.yearMonth[1]
                }
                vm.settlementPage(val, false, params);
                console.log(`当前页: ${val}`);
            },

            // 分页 ==============================================
            // queryConditions
            queryByConditions() {
                var params = {
                    startTime: vm.query.yearMonth[0],
                    endTime: vm.query.yearMonth[1]
                }
                console.log(params)
                vm.settlementPage(0, false, params)

            },
            // 批量按条件导出Excel
            downloadFile() {
                var url = "settlement/month/export";
                var params = vm.query.resultParams;
                if (JSON.stringify(params) != "{}") {

                    url += "?startTime=" + params.startTime;
                    url += "&endTime=" + params.endTime;
                }

                window.location.href = url;
            },
            uploadSuccessAfter() {
                this.$message({
                    showClose: true,
                    message: '编辑上传成功',
                    type: 'success'
                });
                vm.queryByConditions();
            },
            uploadErrorAfter(err, file, fileList){
                this.$message({
                    showClose: true,
                    message: err,
                    type: 'success'
                });
            }

        }
    })
</script>
</html>